<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>函数</title>
	<style>
      #D{
      	width: 500px;
      	margin: 0 auto;
      }
      input{
      	margin: 5px;
      }
      .O{
      	width: 100px;
      	height: 100px;
      	background-color: green;
      	margin: 0 auto;
      }
	</style>
      <script>
      var function stylechange(elem,attr,value){
            elem.style[attr]=value
      }
            var node = document.getElementsByTagName('input')
            var nod = document.getElementsByClassName('O')
            var attt =["width","height","backgroundColor","display","display"]
            var val =["300px","300px","purple","none","block"]
            window.onload = function(){
                  for (var i = 0; i < node.length; i++) {
                        node[i].onclick=function(){
                              // alert("Hey Boy!")
                              this.index=i;
                             nod[0].style.attr[i] = stylechange(nod[0],attr,val) 
                        }
                  }
                   
            }
      </script>
</head>
<body>
	<div id="D">
		<input type="button" value="变宽">
		<input type="button" value="变高">
		<input type="button" value="变色">
		<input type="button" value="隐藏">
		<input type="button" value="重置">
	</div>
	<div class="O">hello world!</div>
</body>
</html>